<template>
    <!-- 窗口侧边栏 -->
    <Toolbar></Toolbar>
    <TypeNav>
        <Category :show-category="showCategory" @mouseleave="showCategory = false" @hover-title="showCategory = true"
                  @select-category="changeCategory"></Category>
    </TypeNav>
    <ListContent :data="searchRes"></ListContent>
</template>
<script lang="ts" name="Search" setup>
import {provide, reactive, ref, shallowRef, watchEffect} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import TypeNav from '@/components/TypeNav/index.vue';
import Category from '@/components/Category/index.vue';
import Toolbar from '@/components/Toolbar/index.vue';
import ListContent from './ListContent.vue';
import {searchProduct} from '@/api/product'

const props = defineProps<{
    keyword?: string,
    categoryName?: string,
    category1Id?: string,
    category2Id?: string,
    category3Id?: string,
}>();
const route = useRoute();
const router = useRouter();
let showCategory = ref(false);
let searchRes = shallowRef({});
let queryParams = reactive({})
provide('queryParams', queryParams)

function changeCategory(category: any, level: number) {
    const query = {
        categoryName: category.categoryName,
        [`category${level}Id`]: category.categoryId,
        keyword: props.keyword
    };
    router.push({name: <string>route.name, query})
}

watchEffect(() => {
    let query = {...props, ...queryParams}
    search(query);
});

function search(query: any) {
    searchProduct(query).then(({data}) => {
        searchRes.value = data;
    })
}

</script>

<style scoped></style>
